<template>
    <div>
        <!--卡片-->
        <el-card class="box-card">
            <!--定义面包屑-->
            <el-breadcrumb separator=">">
                <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>系统管理</el-breadcrumb-item>
                <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            </el-breadcrumb>
            <el-divider></el-divider>
            <!--表单的搜索框
                 :model="双向绑定表单的数据"
            -->
            <el-form :inline="true" :model="userFormData"  class="demo-form-inline">
                <el-form-item >
                    <el-input v-model="userFormData.userName" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item >
                    <el-input v-model="userFormData.loginName" placeholder="请输入登录名"></el-input>
                </el-form-item>
                <el-form-item >
                    <el-input v-model="userFormData.email" placeholder="请输入邮箱"></el-input>
                </el-form-item>
                <el-form-item >
                    <el-input v-model="userFormData.phone" placeholder="请输入电话"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="queryUser()">查询</el-button>
                    <el-button type="primary" @click="addCLICK()">添加</el-button>
                </el-form-item>
            </el-form>
            <!--数据表格-->
            <template>
                <!--用户表格基本信息-->
                <el-table
                        :data="tableData"
                        :border="true"
                        stripe
                        style="width: 100%">
                    <el-table-column
                            prop="userId"
                            label="编号"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="userName"
                            label="账号"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="loginName"
                            label="昵称">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="状态" >
                        <template slot-scope="scope">
                            <el-switch
                                    @change="changestatus(scope.row.userId,scope.row.status)"
                                    v-model="scope.row.status"
                                    active-color="#13ce66"
                                    active-value="0"
                                    inactive-value="1"
                                    inactive-color="#ff4949"

                            >
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="avatar"
                            label="头像">
                        <template   slot-scope="scope">
                            <img :src="scope.row.avatar"  min-width="70" height="80" />
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="createTime"
                            label="创建时间">
                    </el-table-column>
                    <el-table-column
                            prop="updateTime"
                            label="修改时间">
                    </el-table-column>

                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-edit" circle @click="editUser(scope.row.userId)"></el-button>
                            <el-button type="danger" icon="el-icon-delete" circle @click="firstdelete(scope.row.userId)"></el-button>
                            <el-button type="warning" icon="el-icon-star-off" circle @click="showUserRole(scope.row.userId)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!--删除弹出框-->
                <el-dialog
                        title="提示"
                        :visible.sync="dialogVisible"
                        width="30%"
                >
                    <span>是否确认删除</span>
                    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="deleteUser()">确 定</el-button>
  </span>
                </el-dialog>

                <!--修改用户弹出框-->
                <el-dialog
                        title="提示"
                        :visible.sync="editDialogVisible"
                        width="30%"
                >
                    <!--model:表单数据-->
                    <el-form  label-width="80px" :model="edituserForm" :rules="rule" ref="edituserForm">
                        <el-form-item label="账号" prop="userName">
                            <el-input v-model="edituserForm.userName"></el-input>
                        </el-form-item>
                        <el-form-item label="部门id" prop="deptId">
                            <el-input v-model="edituserForm.deptId"></el-input>
                        </el-form-item>
                        <el-form-item label="昵称" prop="loginName">
                            <el-input v-model="edituserForm.loginName"></el-input>
                        </el-form-item>
                        <el-form-item label="用户类型" prop="userType">
                            <el-select v-model="edituserForm.userType" placeholder="请选择用户类型">
                                <el-option label="系统用户" value="00"></el-option>
                                <el-option label="其他" value="01"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="邮箱" prop="email">
                            <el-input v-model="edituserForm.email"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号码" prop="phonenumber">
                            <el-input v-model="edituserForm.phonenumber"></el-input>
                        </el-form-item>
                        <el-form-item label="头像路径" prop="avatar">
                            <el-upload
                                    class="avatar"
                                    action="http://localhost:80/system/upload"
                                    :show-file-list="false"
                                    :headers="{'token' :token}"
                                    :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload">
                                <img v-if="imgUrl" :src="imgUrl" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="edituserForm.remark"></el-input>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmEditUser('edituserForm')">确 定</el-button>
              </span>
                </el-dialog>

            <!--修改权限弹出框-->
                <el-dialog
                        title="提示"
                        :visible.sync="editDialogVisiblesecond"
                        width="30%"
                >
                    <el-checkbox-group
                            v-model="userRole">
                        <el-checkbox v-for="role in roleFormData" :label="role.roleId" :key="role.roleId">{{role.roleName}}</el-checkbox>
                    </el-checkbox-group>
                    <el-button @click="editDialogVisiblesecond = false">取 消</el-button>
                    <el-button type="primary" @click="editUserRole()">确 定</el-button>
                </el-dialog>

                <!--新增用户弹出框-->
                <el-dialog
                        title="提示"
                        :visible.sync="editDialogVisiblethird"
                        width="30%"
                >
                    <!--model:表单数据-->
                    <el-form  label-width="80px" :model="addUserForm" :rules="rule" ref="addUserForm">
                        <el-form-item label="账号" prop="userName">
                            <el-input v-model="addUserForm.userName"></el-input>
                        </el-form-item>
                        <el-form-item label="部门id" prop="deptId">
                            <el-input v-model="addUserForm.deptId"></el-input>
                        </el-form-item>
                        <el-form-item label="昵称" prop="loginName">
                            <el-input v-model="addUserForm.loginName"></el-input>
                        </el-form-item>
                        <el-form-item label="用户类型" prop="userType">
                            <el-select v-model="addUserForm.userType" placeholder="请选择用户类型">
                                <el-option label="系统用户" value="00"></el-option>
                                <el-option label="其他" value="01"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="邮箱" prop="email">
                            <el-input v-model="addUserForm.email"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号码" prop="phonenumber">
                            <el-input v-model="addUserForm.phonenumber"></el-input>
                        </el-form-item>
                        <el-form-item label="性别" prop="sex">
                            <el-select v-model="addUserForm.sex" placeholder="请选择用户性别">
                                <el-option label="男" value="0"></el-option>
                                <el-option label="女" value="1"></el-option>
                                <el-option label="未知" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="头像路径" prop="avatar">
                            <el-upload
                                    class="avatar"
                                    action="http://localhost:80/system/upload"
                                    :show-file-list="false"
                                    :headers="{'token' :token}"
                                    :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload">
                                <img v-if="imgUrl" :src="imgUrl" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="账号状态" prop="status">
                            <el-select v-model="addUserForm.status" placeholder="请选择账号状态">
                                <el-option label="正常" value="0"></el-option>
                                <el-option label="停用" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="addUserForm.remark"></el-input>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisiblethird = false">取 消</el-button>
                <el-button type="primary" @click="addUser('addUserForm')">确 定</el-button>
              </span>
                </el-dialog>

                <!--                分页-->
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </template>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "Users",
        data(){
            return {
                rule: {
                    userName: [
                        {
                            required: true, message: '姓名不能为空', trigger: 'blur'
                        },
                        {
                            min: 5, max: 16, message: '长度在 5 到 16 个字符'
                        },
                        {
                            pattern: /^[\\u4e00-\\u9fa5_a-zA-Z0-9-]{5,16}$/, message: '限16个字符，支持英文、数字、减号或下划线'
                        }
                    ],
                    deptId:[
                        {
                            required: true, message: '部门ID不能为空', trigger: 'blur'
                        },
                        {
                            pattern: /^[0-9]*[1-9][0-9]*$/, message: '限正整数'
                        }

                    ],
                    loginName:[
                        {
                            required: true, message: '昵称不能为空', trigger: 'blur'
                        },
                        {
                            pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/, message: '仅支持中英文、数字'
                        }
                    ],
                    email:[
                        {
                            required: true, message: '邮箱不能为空', trigger: 'blur'
                        },
                        {
                            pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message: '只允许英文字母、数字、下划线、英文句号、以及中划线组成'
                        }

                    ],
                    phonenumber:[
                        {
                            required: true, message: '手机号码不能为空', trigger: 'blur'
                        },
                        {
                            pattern: /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/, message: '手机号码格式不正确'
                        }

                    ],
                },
                //条件搜索对象
                addUserForm:{
                    deptId:"",
                    loginName:"",
                    userName:"",
                    userType:"",
                    email:"",
                    phonenumber:"",
                    sex:"",
                    avatar:"",
                    status:"",
                    remark:"",
                },
                editDialogVisiblethird:false,
                userRole:[],
                roleFormData:[],
                userFormData:{
                    userName:"",
                    loginName:"",
                    email:"",
                    phone:""
                },
                edituserForm:{
                    userId:"",
                    deptId:"",
                    loginName:"",
                    userName:"",
                    userType:"",
                    email:"",
                    phonenumber:"",
                    avatar:"",
                    remark:"",
                },
                token:"",
                imgUrl:"",
                //表格数据
                tableData:[],
                //每页显示的条数
                pageSize: 5,
                //当前的显示的页码
                currentPage:1,
                UserId:0,
                //总条数
                total:0,
                editDialogVisible :false,
                dialogVisible:false,
                editDialogVisiblesecond:false,
            }
        },
        methods:{
            addCLICK(){
                this.editDialogVisiblethird=true;
                this.addUserForm={};
                this.imgUrl='';
                this.token= sessionStorage.getItem("token")

            },
            //图片上传
            handleAvatarSuccess(res, file) {
                this.imgUrl =res.result.path;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            addUser(addUserForm){
                this.$refs[addUserForm].validate((valid) => {
                        if(valid){
                        var that =this;
                        var username = sessionStorage.getItem("username");
                        this.addUserForm.avatar=this.imgUrl;
                        this.$http.put(`system/menu/addUser/${username}`,this.addUserForm).then(r=>{
                            this.$message.success(r.data.result.message)
                            this.queryUser()
                            this.editDialogVisiblethird=false;
                        })
                    }else{
                        this.$message.error("请按规范填写表中数据")
                    }



                })
            },
            changestatus(userId,status){
                var that =this;
                this.$http.put("system/menu/editUserStatus?id="+userId+"&status="+status).then(r=>{
                })
            },
            editUserRole(){
                var that =this;
                this.$http.put(`system/menu/editUserRole/${this.UserId}`,this.userRole).then(r=>{
                    this.$message.success("修改成功")
                })
                that.editDialogVisiblesecond=false;

            },
            showUserRole(userId){
                var that =this;
                that.editDialogVisiblesecond=true;
                this.$http.get("system/menu/queryBYuserfRole?userId="+userId).then(r=>{
                    that.userRole=r.data.result.role
                    console.log(r.data.result.roleall)
                    that.roleFormData=r.data.result.roleall
                    that.UserId=userId
                })
    },
            firstdelete(userId){
                var that =this;
                that.dialogVisible=true;
                this.$http.get("system/menu/querybyUserid?userId="+userId).then(r=>{
                    that.userForm=r.data.result.users[0]
                })
            },
            deleteUser(){
                var that =this;
                var id = this.userForm.userId
                this.$http.delete("system/menu/deleteUserBYid?userId="+id).then(r=>{
                    this.$message.success("删除成功")
                    that.dialogVisible=false;
                    this.queryUser()
                })

    },
            //触发修改信息的弹窗
            editUser(userId){
                var that =this;
                that.editDialogVisible=true;
                that.token= sessionStorage.getItem("token")

                this.$http.get("system/menu/querybyUserid?userId="+userId).then(r=>{
                    that.edituserForm=r.data.result.users[0]
                    that.imgUrl=r.data.result.users[0].avatar;
                })
            },
            //修改信息
            confirmEditUser(edituserForm){
                this.$refs[edituserForm].validate((valid) => {
                    if(valid){
                        var that =this;
                        this.edituserForm.avatar=this.imgUrl;
                        var username = sessionStorage.getItem("username");
                        this.$http.put(`system/menu/editUser/${username}`,this.edituserForm).then(r=>{
                            this.$message.success(r.data.result.message)
                            that.editDialogVisible=false;
                            this.queryUser()
                        })

                    }else{
                        this.$message.error("请按规范填写表中数据")
                    }

                })

    },
            queryUser(){
                var that = this
                this.$http.post(`system/menu/queryallUser/${this.currentPage}/${this.pageSize}`,this.userFormData).then(r=>{
                    that.tableData=r.data.result.records
                    that.total=r.data.result.total
                })

            },
            // querybysm(){
            //
            // },


            //当改变没有显示的条数时触发该方法
            handleSizeChange(y){
                this.pageSize=y
                this.queryUser()


            },
            //切换页码时触发该方法
            handleCurrentChange(y){
                this.currentPage=y
                this.queryUser()
            }

        },
        mounted(){
            this.queryUser()
        }
    }
</script>

<style >
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }


</style>
